<script setup lang="ts">
  import { ref, watch, reactive } from 'vue';
  import {
    boxMaterialSend,
    materialBoxExpendQuery,
  } from '@/api/operation-monitoring';
  import { Notification } from '@arco-design/web-vue';

  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'PAGEHELPER_ROW_ID',
      key: 'PAGEHELPER_ROW_ID',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '图号',
      dataIndex: 'itemCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '成品型号',
      dataIndex: 'mProductNumber',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '质量编号',
      dataIndex: 'qualityCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '数量',
      dataIndex: 'itemQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '缓存箱',
      dataIndex: 'workbinCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '条码',
      dataIndex: 'barcode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '日期',
      dataIndex: 'createDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
  ];
  // 创建一个响应式的本地副本
  const localTableData = ref<any>();
  // 数据库一共有多少条
  const total = ref<number>(1);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(10);
  const rangeDate = ref<Date[]>([]);
  const formValues = reactive({
    itemCode: '',
    mProductNumber: '',
    qualityCode: '',
    dealVal: '',
    deliveryPlanCode: '',
    barcode: '',
    startTime: '',
    endTime: '',
  });
  const loadTableData = (record: any, done: any) => {
    console.log(record);
    materialBoxExpendQuery({ queryParam: formValues, tree: record }).then(
      (response) => {
        if (response) {
          response.forEach((item: any) => {
            item.isLeaf = true;
          });
          console.log(response);
          return done(response);
        }
        return null;
      }
    );
  };
  const taskoptions = [
    {
      label: '请选择',
      value: '0',
    },
    {
      label: '已完成接收',
      value: 'Y',
    },
    {
      label: '未完成接收',
      value: 'N',
    },
  ];
  async function handleSearch() {
    const response = await boxMaterialSend({
      queryParam: formValues,
      page: { total: 1, pageSize: pageSize.value, currentPage: pageNum.value },
    });
    if (response.list) {
      localTableData.value = response.list;
      total.value = response.total;
    } else {
      Notification.warning({
        title: '提示',
        content: '查询失败',
        closable: true,
      });
    }
  }
  function reset() {
    Object.keys(formValues).forEach((key) => {
      (formValues as Record<string, any>)[key] = '';
    });
    rangeDate.value = [];
    setTimeout(() => {
      handleSearch();
    }, 150);
  }
  // 监听页面变化
  watch([pageNum, pageSize], () => {
    handleSearch();
  });
  watch(rangeDate, () => {
    if (rangeDate.value && rangeDate.value.length >= 2) {
      formValues.startTime = rangeDate.value[0].toString();
      formValues.endTime = rangeDate.value[1].toString();
    }
  });
  // 监听已选择数据的序号，并更新到已选择表格数据行字段
  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }
</script>

<template>
  <div class="content-page">
    <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <a-input
          v-model="formValues.deliveryPlanCode"
          placeholder="交接单号"
          size="large"
          @press-enter="handleSearch"
        />
      </a-col>
      <a-col :span="6">
        <a-input
          v-model="formValues.barcode"
          placeholder="条码"
          size="large"
          @press-enter="handleSearch"
        />
      </a-col>
      <a-col :span="6">
        <a-input
          v-model="formValues.itemCode"
          placeholder="物料图号"
          size="large"
          @press-enter="handleSearch"
        />
      </a-col>
      <a-col :span="6">
        <a-input
          v-model="formValues.mProductNumber"
          placeholder="成品型号"
          size="large"
          @press-enter="handleSearch"
        />
      </a-col>
      <a-col :span="6">
        <a-input
          v-model="formValues.qualityCode"
          placeholder="质量编号"
          size="large"
          @press-enter="handleSearch"
        />
      </a-col>
      <a-col :span="6">
        <a-select
          v-model="formValues.qualityCode"
          placeholder="分配状态"
          @press-enter="handleSearch"
        >
          <a-option
            v-for="task of taskoptions"
            :key="task.value"
            :value="task.value"
            :label="task.label"
          >
          </a-option>
        </a-select>
      </a-col>
      <a-col :span="12">
        <a-range-picker v-model:model-value="rangeDate" style="width: auto" />
      </a-col>
    </a-row>
    <a-space style="margin-top: 16px">
      <a-button type="primary" size="large" @click="handleSearch">
        查询
      </a-button>
      <a-button class="btn-reset" size="large" @click="reset">重置</a-button>
    </a-space>
    <a-divider />
    <div>
      <a-table
        :stripe="true"
        class="top-table"
        :pagination="false"
        :columns="columns"
        :data="localTableData"
        :load-more="loadTableData"
        row-key="PAGEHELPER_ROW_ID"
      >
      </a-table>
      <div class="page-position">
        <a-pagination
          :total="total"
          :current="pageNum"
          :page-size="pageSize"
          show-total
          show-jumper
          show-page-size
          @change="change"
          @update:page-size="changeSize"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
  span {
    margin-bottom: 16px;
  }
  .top-table {
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .content-page {
    padding-left: 12px;
    padding-right: 12px;
  }
</style>
